<template>
    <el-main>
        <el-row justify="center">
            <el-col :span="20">
                <el-row justify="center" :gutter="10">
                    <el-col :span="6">
                        <div class="aside">
                            <el-card class="author-card aside-card" shadow="never">
                                <div class="author">
                                    <img src="@/assets/images/wy.png" alt="作者名" class="author-avatar">
                                    <div>
                                        <div class="author-name">作者名</div>
                                        <div class="author-tags">标签</div>
                                    </div>
                                </div>
                                <div class="author-info">
                                    <dl class="author-info-item">
                                        <dt>42</dt>
                                        <dd>粉丝</dd>
                                    </dl>
                                    <dl class="author-info-item">
                                        <dt>175</dt>
                                        <dd>获赞</dd>
                                    </dl>
                                    <dl class="author-info-item">
                                        <dt>16</dt>
                                        <dd>评论</dd>
                                    </dl>
                                    <dl class="author-info-item">
                                        <dt>119</dt>
                                        <dd>收藏</dd>
                                    </dl>
                                </div>
                                <el-divider />
                                <div class="author-btn">
                                    <el-button :icon="Message">私信</el-button>
                                    <el-button :icon="Plus" type="primary">关注</el-button>
                                </div>
                            </el-card>
                            <el-card class="catalogue-card aside-card" shadow="never">
                                <template #header>
                                    <div class="card-header">
                                        目录
                                    </div>
                                </template>
                                <ol>
                                    <li class="catalogue-item" v-for="item in 5">
                                        小标题{{ item }}
                                    </li>
                                </ol>
                            </el-card>
                            <el-card class="search-card aside-card" shadow="never">
                                <div class="search">
                                    <el-input v-model="asideSearch" placeholder="搜博主文章" class="aside-search">
                                        <template #append>
                                            <el-button :icon="Search" />
                                        </template>
                                    </el-input>

                                </div>
                            </el-card>
                            <el-card class="hot-article-card" shadow="nerver">
                                <template #header>
                                    <div class="card-header">
                                        热门文章
                                    </div>
                                </template>
                                <div class="hot-article">
                                    <ul>
                                        <li class="hot-article-item" v-for="item in 5">
                                            <p>内容内容内容内容内容内容内容内容内容内容内容内容内容
                                                <el-icon color="#909399" :size="12">
                                                    <View />
                                                </el-icon>
                                                <span>213</span>
                                            </p>
                                        </li>
                                    </ul>
                                </div>
                            </el-card>
                        </div>
                    </el-col>
                    <el-col :span="18">
                        <div class="container">
                            <div class="title">
                                <h1>标题</h1>
                            </div>
                            <div class="information">
                                <div class="prefix">

                                </div>
                                <div>
                                    <div class="base-info">
                                        <div class="base-info-item">作者名</div>
                                        <div class="base-info-item">
                                            <el-icon>
                                                <Clock />
                                            </el-icon>
                                            <span>于2023-10-09 17:13:25发布</span>
                                        </div>
                                        <div class="base-info-item">
                                            <el-icon>
                                                <View />
                                            </el-icon>
                                            <span>19</span>
                                        </div>
                                        <div class="base-info-item">
                                            <el-icon>
                                                <Star />
                                            </el-icon>
                                            <span>收藏</span>
                                        </div>
                                    </div>
                                    <div class="article-tags">
                                        <span>文章标签:</span>
                                        <el-tag>前端</el-tag>
                                        <el-tag>js</el-tag>
                                        <el-tag>开发语言</el-tag>
                                    </div>
                                </div>
                            </div>
                            <div class="content">
                                <h3 class="placeholderTitle">小标题</h3>

                                <div class="placeholderBox">
                                    <div class="placeholderText">内容...</div>
                                </div>
                            </div>
                        </div>
                        <div class="footer">
                            <div class="footer-author">
                                <img src="@/assets/images/wy.png" alt="作者名" class="footer-author-avatar">
                                <div class="footer-author-name">
                                    <h4>作者名</h4>
                                </div>
                                <el-button round>关注</el-button>
                            </div>
                            <div class="footer-operation">
                                <div class="footer-operation-item">
                                    <el-icon :size="16">
                                        <Like />
                                    </el-icon>
                                    <span>10</span>
                                </div>
                                <div class="footer-operation-item">
                                    <el-icon :size="16">
                                        <Unlike />
                                    </el-icon>
                                    <span>0</span>
                                </div>
                                <div class="footer-operation-item">
                                    <el-icon>
                                        <Star />
                                    </el-icon>
                                    <span>12</span>
                                </div>
                                <div class="footer-operation-item">
                                    <el-icon>
                                        <ChatLineSquare />
                                    </el-icon>
                                    <span>12</span>
                                </div>
                                <el-divider direction="vertical" />
                                <div class="footer-operation-item">
                                    <el-icon>
                                        <Share />
                                    </el-icon>
                                    <span>12</span>
                                </div>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </el-main>
</template>

<script setup>
import Like from "@/components/Like/index.vue"
import Unlike from "@/components/Unlike/index.vue"
import { Message, Plus, Search, View, Star, Clock, ChatLineSquare, Share } from '@element-plus/icons-vue'
import { ref } from 'vue'

const asideSearch = ref()
</script>

<style lang="scss" scoped>
.aside-card {
    margin-bottom: 10px;
    background-color: #FFFFFF;
}

.author {
    display: flex;
    margin-bottom: 10px;
}

.author-avatar {
    width: 45px;
    height: 45px;
    margin-right: 10px;
    border-radius: 50%;
    cursor: pointer;
}

.author-name {
    font-size: 14px;
    margin-bottom: 5px;
    cursor: pointer;
}

.author-name:hover {
    color: #9286d1;
}

.author-tags {
    font-size: 12px;
    color: #606266;
}

.author-info {
    display: flex;
    justify-content: space-around;
    font-size: 14px;
}

.author-info-item {
    text-align: center;

    dd {
        color: #606266;
    }
}

.author-btn {
    display: flex;
    justify-content: space-around;

    .el-button {
        width: 45%;
    }
}

.catalogue-card ol {
    list-style: none;

    .catalogue-item {
        padding: 0 10px;
        margin-bottom: 10px;
        line-height: 1.5;
        cursor: pointer;
    }

    .catalogue-item:hover {
        background-color: #f4f3fa;
        color: #9286d1;
    }
}

.hot-article {
    ul {
        list-style: none;
    }

    .hot-article-item {
        line-height: 1.5;
        margin-bottom: 10px;
        cursor: pointer;

        .el-icon {
            margin: 0 5px;
        }

        span {
            color: #606266;
            font-size: 14px;
            line-height: 1.5;
        }
    }

    .hot-article-item:hover {
        color: #9286d1;
    }
}

.container {
    border-radius: 5px;
    background-color: #FFFFFF;
    padding: 20px;

    .title {
        margin-bottom: 10px;
    }

    .information {
        display: flex;
        padding: 10px;
        font-size: 14px;
        line-height: 1.5;
        color: #606266;
        background-color: #f2f3f5;
        border-radius: 5px;

        .prefix {
            margin-right: 10px;
        }

        .base-info {
            display: flex;

            .base-info-item:first-child {
                color: #303133;
                cursor: pointer;
            }

            .base-info-item:first-child:hover {
                color: #9286d1;

            }

            .base-info-item:last-child {
                cursor: pointer;
            }

            .base-info-item:last-child:hover {
                color: #9286d1;
            }

            .base-info-item {
                .el-icon {
                    margin-right: 5px;
                }

                display: flex;
                align-items: center;
                margin-right: 20px;
            }
        }

        .article-tags {
            display: flex;
            align-items: center;

            span {
                margin-right: 5px;
            }

            .el-tag {
                margin-right: 10px;
                cursor: pointer;
            }
        }
    }

    .content {
        margin-top: 50px;

        .placeholderTitle {
            margin-bottom: 20px;
        }


        .placeholderBox {
            min-height: 500px;
            overflow: hidden;

            .placeholderText {
                float: left;
            }
        }

    }
}

.footer {
    display: flex;
    justify-content: space-between;
    background-color: #FFFFFF;
    padding: 20px;
    border-radius: 0 0 5px 5px;
    box-shadow: 0 -1px 8px 0 rgba(0, 0, 0, 0.06);

    .footer-author {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .footer-author-avatar {
        width: 30px;
        height: 30px;
        margin-right: 10px;
        border-radius: 50%;
    }

    .footer-author-name {
        margin-right: 10px;
    }

    .footer-operation {
        color: #303133;
        display: flex;
        align-items: center;
        cursor: pointer;

        .footer-operation-item {
            display: flex;
            align-items: center;

            .el-icon {
                margin-right: 5px;
            }

            margin-right: 20px;
        }
    }


}
</style>